<template>
  <div class="box">
    <el-container class="isbox">
      <el-header>
        <el-row>
          <el-col :span="5"
            ><div class="grid-content bg-purple-dark">
              <span class="spanx">关键词:</span>
              <el-input
                v-model="input"
                placeholder="根据用户名搜索"
              ></el-input></div
          ></el-col>
          <el-col :span="19"
            ><div class="grid-content bg-purple-light contents">
              <el-button class="btn2" @click="delbtn">清空</el-button>
              <el-button class="btn2" type="primary" @click="seach"
                >搜索</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-main>
        <el-col :span="24"
          ><div class="grid-content bg-purple-dark record">
            共{{ tableData.length }}条记录
          </div>
        </el-col>
        <el-table
          :data="tableData"
          style="width: 100%"
          align="center"
          :header-cell-style="{
            background: '#fafafa',
            color: '#000000'
          }"
        >
          <el-table-column prop="id" label="编号" width="220" align="center">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              {{ questionTypeText(scope.row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column prop="" label="题目编号" align="center" width="220">
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            align="center"
            width="220"
          >
          </el-table-column>
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            align="center"
            width="290"
          >
          </el-table-column>
          <el-table-column
            prop="accuracyRate"
            label="正确率"
            align="center"
            width="190"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="录入人"
            align="center"
            width="290"
          >
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template #default="{ row }">
              <!-- 删除按钮 -->
              <el-button
                class="btn4"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delBtn(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer
        ><div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout=" sizes, prev, pager, next, jumper"
            :total="40"
            background
          >
          </el-pagination></div
      ></el-footer>
    </el-container>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      input: '',
      currentPage4: 1,
      mytext: '创建用户',
      current: 1,
      pageSize: 10,
      myFlag: true,
      tableData: [
        {
          id: '1',
          email: '123456789@qwe.com',
          phone: '123456789',
          username: '娃哈哈',
          permission_group_title: '用户',
          role: 'admin'
        }
      ],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      data: {
        page: '1',
        pagesize: '10',
        username: ''
      },
      drawerType: ''
    }
  },
  // 用户列表
  async created () {
    this.initData()
  },

  methods: {
    // 页面大小
    async handleSizeChange (val) {
      this.data.pagesize = val
      const { data } = await randoms(this.data)
      console.log(data)
      this.tableData = data.items
      console.log(`页大小: ${val}`)
    },
    // 当前页面
    async handleCurrentChange (val) {
      this.data.page = val
      const { data } = await randoms(this.data)
      console.log(data)
      this.tableData = data.items
      console.log(`当前页: ${val}`)
    },
    // 删除按钮
    delBtn (data) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await removeRandoms(data)
          if (res.status === 200) {
            this.initData()
          }
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    questionTypeText (questionType) {
      switch (questionType) {
        case '1':
          return '单选'
        case '2':
          return '多选'
        case '3':
          return '简答'
        default:
          return ''
      }
    },
    async addUser (type, id) {
      this.drawerType = type
      if (type === 'modify') {
        this.mytext = '修改信息'
        this.myFlag = false
        const formData = {
          username: id.username,
          email: id.email,
          password: id.password,
          role: id.role,
          permission_group_id: id.permission_group_id,
          phone: id.phone,
          introduction: id.introduction
        }
        this.ruleForm = this._.cloneDeep(formData)
        console.log(this._.cloneDeep(formData))
      } else {
        this.mytext = '新增用户'
        this.myFlag = true
        // this.$refs.ruleForm.resetFields()
      }
      this.dialogFormVisible = true
    },
    async initData () {
      const { data } = await randoms({
        current: this.current,
        pageSize: this.pageSize,
        title: this.input
      })
      this.tableData = data.items
      console.log(data.items)
    },
    seach () {
      this.initData()
    },
    delbtn () {
      this.input = ''
      this.initData()
    }
  },
  watch: {
    dialogFormVisible () {
      if (!this.dialogFormVisible) {
        // this.$refs.ruleForm.resetFields()
        this.ruleForm = {
          username: '',
          email: '',
          password: '',
          role: '',
          permission_group_id: '',
          phone: '',
          introduction: ''
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
}
.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
}
.box {
  padding: 20px;
  .isbox {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
}
.btn2 {
  width: 56px;
  height: 32px;
  padding: 0;
}
.btn3 {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409eff;
}
.btn4 {
  background-color: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}
.btn3:hover {
  background-color: rgb(64, 158, 255);
  color: #fff;
}
.btn4:hover {
  background-color: rgb(245, 108, 108);
  color: #fff;
}
.grid-content {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 60px;
}
.contents {
  float: right;
}
.btn {
  width: 100px;
  padding: 10px 12px;
}
.record {
  width: 100%;
  height: 30px;
  background-color: #f4f4f5;
  line-height: 30px;
  border-radius: 2px;
  margin-bottom: 20px;
}
span {
  display: inline-block;
  height: 32px;
}
.block {
  display: flex;
  justify-content: flex-end;
}
.el-pagination {
  padding: 17px 10px;
  height: 60px;
}
.has-gutter {
  background-color: #e8e8e8;
}
.inp {
  width: 280px;
}
.dialog-footer {
  display: flex;
  margin-left: 100px;
}
.spanx {
  width: 64px;
  line-height: 35px;
}
</style>
